<template>
  <ul class="self-step">
    <li v-for="item in stepList" :key="item.key" :class="{active: stepKey === item.key}">
      {{item.text}}
    </li>
  </ul>
</template>

<script>
export default {
  // stepList步骤显示的内容数组， stepNum当前步骤数
  props: ['stepList', 'stepKey']
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.self-step
  display flex

  li
    height 34px
    line-height 34px
    position relative
    padding 0 15px 0 20px
    background-color #fff
    color #ADB5BD
    font-size 13px

    &:first-of-type
      border-left 1px solid #cfcfcf

    &:before
      content ""
      position absolute
      left 100%
      top 0
      border 17px solid #e2e2e0
      border-right 0
      border-left-width 9px
      border-top-color transparent
      border-bottom-color transparent
      margin-left 1px
      z-index  5
    
    &:after
      content ""
      position absolute
      left 100%
      top 0
      border 17px solid #fff
      border-right 0
      border-left-width 9px
      border-top-color transparent
      border-bottom-color transparent
      z-index 5

  .active
    background-color #e9ecef
    font-weight 600
    color #6A8EBF

    &:after
      border-color #e9ecef
      border-top-color transparent
      border-bottom-color transparent
      
</style>
